<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="icon" href="./images/favicon.ico" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/login.css"/>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="login">
        <div class="header" spanconten="注册" topath="register">
            <header>
                <div class="container">
                    <div class="leftcontent">
                        <img src="images/download.png" alt="打零工logo"> | 客服电话：400-750-8585
                    </div>
                    <div class="righttcontent"><span>登录</span>&nbsp; |&nbsp; <span>注册</span></div>
                </div>
            </header>
        </div>
        <div class="bg">
            <div class="container">
                <div class="login_box fr">
                    <h2>快速注册</h2>
                    <p class="login_tip"></p>
                    <input type="tel" placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11"
                           class="phone" onblur="phoneblur()" onfocus="phonefocus()" id="phone">
                    <input type="password" placeholder="请输入密码" maxlength="16" class="phone" id="password"
                           onblur="passwordblur()" onfocus="passwordfocus()">
                    <div class="login_code clearfix">
                        <input type="tel" placeholder="请输入图形验证码" maxlength="4" class="phone" id="imgvalidmaCode"
                               onfocus="imgvalidCodefocus()" onblur="imgvalidCodeblur()">
                        <img src="" alt="图形验证码" class="mainColor" id="imgvalidma">
                    </div>
                    <div class="login_code infocode clearfix" style="">
                        <input type="tel" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="6" placeholder="请输入验证码"
                               class="phone" id="validCodenum" onblur="validCodeblur()" onfocus="validCodefocus()">
                        <input type="button" id="validCode" class="btn outlinea mainColor ivu-btn" value="获取验证码"/>
                    </div>
                    <button type="button" class="mainColor-bg" id="register" onclick="register()">注册</button>
                    <i>《打零工服务协议》</i>
                    <div class="mainColor reg">
                        <span>已有账号？<a href="login.html">登录</a></span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="footer">
                    <div class="container">
                        <p>Copyright©2017 打零工版权所有 沪ICP备15006046号</p>
                    </div>
                </div>
            </div>
        </div>
        <script src="./js/public.js"></script>
        <script src="js/md5.js" type="text/javascript"></script>
        <script>

            // var url = 'http://test2.dalinggong.com';
            // 倒计时
            var validCode = document.getElementById('validCode');
            var countdown = 59;

            function settime(obj) {
                if (countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.value = "获取验证码";
                    countdown = 59;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.value = "重新发送(" + countdown + ")";
                    countdown--;
                }
                setTimeout(function () {
                    settime(obj)
                }, 1000)
            }

            $(function () {
                imgvalidma();
                $("#validCode").click(function () {
                    var phone = $('#phone').val();
                    var password = $('#password').val();
                    var imgvalidmaCode = $('#imgvalidmaCode').val();
                    if (phone.length < 11) {
                        $("#phone").css("border", "1px solid red");
                        $(".login_tip").text("手机号不能少于11位");
                        return false;
                    } else if (!(/^1[34578]\d{9}$/.test(phone))) {
                        $("#phone").css("border", "1px solid red");
                        $(".login_tip").text("请输入有效手机号码");
                        return false;
                    }else if (password.length < 6) {
                        $("#password").css("border", "1px solid red");
                        $(".login_tip").text("密码不能少于6位");
                    }else if (imgvalidmaCode.length < 4) {
                        $("#imgvalidmaCode").css("border", "1px solid red");
                        $(".login_tip").text("图文验证码有误");
                        return false;
                    }else {
                        $(".login_tip").text("");
                        $.ajax({
                            url: url+'/sys/sendsmscode',
                            type: 'post',
                            data: {phone: phone,vcode:imgvalidmaCode},
                            dataTypt: 'json',
                            timeout: '1000',
                            cache: 'false',
                            success: function (jsData) {
                                if (jsData.status == 200) {
                                    $(".login_tip").text(jsData.body.msg);
                                    settime(validCode);
                                }else {
                                    $(".login_tip").text(jsData.body.msg);
                                }
                            }
                        })
                    }
                })
            });

            function phoneblur() {

                var phone = $('#phone').val();
                if (phone.length < 11) {
                    $("#phone").css("border", "1px solid red");
                    $(".login_tip").text("手机号不能少于11位");
                } else if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#phone").css("border", "1px solid red");
                    $(".login_tip").text("请输入有效手机号码")
                } else {
                    $(".login_tip").text("");

                    $.ajax({
                        url: url+'/auth/check',
                        type: 'post',
                        data: {phone: phone},
                        dataTypt: 'json',
                        timeout: '1000',
                        cache: 'false',
                        success: function (data) {
                            var jsData=JSON.parse(data);
                            if (jsData.status == 200) {
                                if (jsData.body.msg == "用户已注册") {
                                    $("#phone").css("border", "1px solid red");
                                    $(".login_tip").text(jsData.body.msg);

                                    setTimeout(function () {
                                    }, 1000)
                                    window.location.href='login.html';
                                }
                            }else {
                                $(".login_tip").text(jsData.body.msg);
                            }
                        }
                    })
                }
            }

            function phonefocus() {
                $(".login_tip").text("");
                $("#phone").css("border", "1px solid #eaeaea");
            }

            function passwordblur() {
                var password = $('#phone').val();
                if (password.length < 6) {
                    $("#password").css("border", "1px solid red");
                    $(".login_tip").text("密码不能少于6位");
                }
            }

            function passwordfocus() {
                $("#password").css("border", "1px solid #eaeaea");
            }

            function validCodeblur() {
                var validCodenum = $('#validCodenum').val();
                if (validCodenum.length < 4) {
                    $("#validCodenum").css("border", "1px solid red");
                    $(".login_tip").text("短信验证码有误");
                }
            }

            function validCodefocus() {
                $("#validCodenum").css("border", "1px solid #eaeaea");
            }

            function imgvalidCodeblur() {
                var imgvalidmaCode = $('#imgvalidmaCode').val();
                if (imgvalidmaCode.length < 4) {
                    $("#imgvalidmaCode").css("border", "1px solid red");
                    $(".login_tip").text("图文验证码有误");
                }
            }

            function imgvalidCodefocus() {
                $("#imgvalidmaCode").css("border", "1px solid #eaeaea");
            }

            function imgvalidma() {
                $("#imgvalidma").attr("src", url+'/sys/vcode');
            }

            $("#imgvalidma").click(function () {
                imgvalidma();
            });

            function register() {
                var phone = $("#phone").val();
                var password =hex_md5($("#password").val());
                console.log("密码",password)
                var imgvalidmaCode = $("#imgvalidmaCode").val();
                var validCodenum = $("#validCodenum").val();
                if (phone.length < 11) {
                    $("#phone").css("border", "1px solid red");
                    $(".login_tip").text("手机号不能少于11位");
                } else if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#phone").css("border", "1px solid red");
                    $(".login_tip").text("请输入有效手机号码")
                } else if (password.length < 6) {
                    $("#password").css("border", "1px solid red");
                    $(".login_tip").text("密码不能少于6位");
                } else if (imgvalidmaCode.length < 4) {
                    $("#imgvalidmaCode").css("border", "1px solid red");
                    $(".login_tip").text("图文验证码有误");
                } else if (validCodenum.length < 6) {
                    $("#validCodenum").css("border", "1px solid red");
                    $(".login_tip").text("短信验证码有误");
                } else {
                    $.ajax({
                        url: url+'/auth/register',
                        type: 'post',
                        data: { phone: phone,
                                pwd:password,
                                clienttype:1,
                                channel:1,
                                vcode:validCodenum},
                        dataTypt: 'json',
                        //timeout: '1000',
                        cache: 'false',
                        success: function (data) {
                            var jsData=JSON.parse(data);
                            console.log(jsData)
                            if (jsData.status == 200) {
                                $("#phone").css("border", "1px solid red");
                                $(".login_tip").text(jsData.body.msg);
                                //window.location.href='login.html';
                            }else {
                                $(".login_tip").text(jsData.body.msg);
                            }
                        }
                    })

                    $(".login_tip").text("");
                    $("#phone,#password,#validCodenum,#imgvalidmaCode").css("border", "1px solid #eaeaea");
                    $("#phone,#password,#validCodenum,#imgvalidmaCode").css("border", "1px solid #eaeaea");
                }
            }
        </script>
    </div>
</body>
</html>
